import { Col, DatePicker, Form, Input, Popover, Row, Select } from "antd";
import React from "react";
import staffList from "./staffList";
import dayjs from "dayjs";
import PopoverSelect from "@/components/_PopoverSelect";

const NameCom = ({ dataSource, setDataSource, detailData }: any) => {
  const [form] = Form.useForm();

  function handleChange(item: any) {
    // console.log(item.itemName, "item");
    const values = form.getFieldsValue([item.itemName]);
    console.log(values, "values");

    const newDataSource = dataSource.map((item1: any) => {
      if (item1.key === detailData.key) {
        if (item.itemName == "entryTime") {
          // console.log(111);
          const newVal = dayjs(values[item.itemName]).format("YYYY-MM-DD");
          return { ...item1, entryTime: newVal };
        }
        if (item.itemName === "departmentName") {
          return { ...item1, department: values.departmentName };
        }
        return { ...item1, ...values };
      }
      return item1;
    });
    setDataSource(newDataSource);
  }

  const ComponentMap = {
    input: (item: any) => {
      return (
        <Input
          placeholder={item.itemPlaceholder}
          onChange={(e) => handleChange(item)}
        ></Input>
      );
    },
    select: (item: any) => {
      return (
        <Select
          placeholder={item.itemPlaceholder}
          onChange={(e) => handleChange(item)}
        >
          {item.itemOptions.map((option: any) => (
            <Select.Option key={option.value} value={option.value}>
              {option.label}
            </Select.Option>
          ))}
        </Select>
      );
    },
    date: (item) => {
      return (
        <DatePicker
          placeholder={item.itemPlaceholder}
          onChange={(e) => handleChange(item)}
          className="w-full"
        ></DatePicker>
      );
    },
    popover: (item) => {
      return (
        <PopoverSelect
          placeholder={item.itemPlaceholder}
          onChange={(value) => {
            // console.log(value);
            if (item.itemName === "departmentName") {
              form.setFieldValue("department", value);
            }
            // console.log(form.getFieldsValue(), "form.getFieldsValue()");

            handleChange(item);
          }}
        ></PopoverSelect>
      );
    },
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        ...detailData,
        entryTime: dayjs(detailData.entryTime),
        departmentName: detailData.department,
      }}
    >
      {/* <Row justify={"space-between"}>
        <Col span={11}>11</Col>
        <Col span={11}>111</Col>
      </Row> */}
      {staffList.map((item, index) => {
        return (
          <Row justify={"space-between"} key={index}>
            {item.map((col, colIndex) => {
              return (
                <Col
                  span={11}
                  key={colIndex}
                  style={col.style as React.CSSProperties}
                >
                  <Form.Item
                    label={col.itemLabel}
                    name={col.itemName}
                    rules={col.itemRules}
                  >
                    {ComponentMap[col.renderType as keyof typeof ComponentMap](
                      col
                    )}
                  </Form.Item>
                </Col>
              );
            })}
          </Row>
        );
      })}
    </Form>
  );
};

export default NameCom;
